@import "../var";
@import "../mixin";

// body {
//   position: fixed;
//   top: 0;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   overflow: hidden;
// }

.spellgroup-page {
  width: 100%;
  height: 100%;
  background-image: url('../../img/activityPage/bg.png');
  background-position: center;
  background-size: 100% 100%;
  .spellgroup-content {
    width: px(335);
    height: px(366);
    position: relative;
    top: 43%;
    margin: auto;
    overflow: hidden;
    .spellgroup-content-countdown {
      margin-bottom: px(10);
      .countdown-list-times {
        height: px(24);
        line-height: px(24);
        text-align: center;
        font-size: 0;
        label {
          display: inline-block;
          margin: px(0) px(5);
          color: $clr-white;
          font-size: px(16);
        }
        span {
          display: inline-block;
          width: px(26);
          height: px(24);
          line-height: px(24);
          text-align: center;
          font-size: px(16);
          font-weight: bold;
          background-color: $clr-white;
          color: $clr-red;
          border-radius: px(2);
        }
        em {
          color: $clr-white;
          font-size: px(16);
          margin: px(0) px(6);
        }
      }
    }
    .spellgroup-content-scrollbox {
      width: px(335);
      height: px(322);
      overflow: hidden;
      border-radius: px(8);
      z-index: 2;
      // background-color: coral;
      .spellgroup-content-inner {
        width: px(360);
        height: px(322);
        overflow: auto;
        z-index: -1;
        -webkit-overflow-scrolling: touch;
        .content-inner-top {
          width: px(335);
          height: px(150);
          background-image: url('../../img/activityPage/card.png');
          background-size: px(335) px(150);
          border-radius: px(8) px(8) px(0) px(0);
          padding: px(20);
          overflow: hidden;
          .spellgroup-prod-img {
            width: px(150);
            height: px(100);
            float: left;
            margin-right: px(8);
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .spellgroup-prod-info {
            .spellgroup-prod-name {
              height: px(40);
              line-height: px(20);
              font-size: px(14);
              color: $clr-g3;
              margin-bottom: px(8);
              @include line-clamp(2);
            }
            .spellgroup-prod-msg {
              height: px(17);
              line-height: px(17);
              font-size: px(12);
              color: $clr-g9;
              margin-bottom: px(6);
              @include ellipsis();
            }
            .spellgroup-prod-price {
              height: px(29);
              color: $clr-red;
              font-size: 0;
              span {
                display: inline-block;
                vertical-align: bottom;
                font-size: px(10);
              }
              em {
                height: px(29);
                line-height: px(33);
                display: inline-block;
                vertical-align: bottom;
                font-size: px(24);
                font-weight: bold;
              }
              del {
                display: inline-block;
                vertical-align: bottom;
                font-size: px(14);
                color: $clr-g9;
                margin-left: px(4);
              }
            }
          }
        }
        .content-inner-bottom {
          width: px(335);
          min-height: px(182);
          background-color: #fff;
          padding: px(20);
          border-radius: px(0) px(0) px(8) px(8);
          .spellgroup-name {
            line-height: px(20);
            font-size: px(14);
            color: $clr-g3;
            margin-bottom: px(12);
          }
          .spellgroup-count {
            line-height: px(28);
            font-size: px(20);
            font-weight: bold;
            color: $clr-g3;
            margin-bottom: px(20);
            span {
              color: $clr-red;
            }
          }
          .spellgroup-btn {
            height: px(40);
            line-height: px(40);
            text-align: center;
            background-image: linear-gradient(90deg, #FF5B83 2%, #F9355C 100%);
            border-radius: 20px;
            a {
              color: $clr-white;
            }
          }
        }
      }
    }
  }
}